<template>
	<uv-popup ref="modal" :mode="mode" :bgColor="bgColor" :round="round" @close="maskClick" :closeable="closeable" :safeAreaInsetBottom="safeAreaInsetBottom" @maskClick="maskClick" :closeOnClickOverlay="closeOnClickOverlay">
		<view class="popup-box ss-flex-col ss-col-center box-sizing">
			<view class="ss-font-40 font-w-600">联系客服</view>
			<view class="ss-m-t-16 font-color-dark5 ss-font-26">使用微信扫码，或长按识别二维码</view>
			<view class="bg-color-white ss-p-24 ss-m-t-24 ss-radius-24">
				<z-image :src="configInfo.kefu_image" width="260rpx" height="260rpx"></z-image>
			</view>
			<view @tap="sheep.$helper.callPhone(configInfo.kefu_mobile)" class="ss-m-t-24 ss-font-26 font-color-dark5">客服电话：{{ configInfo.kefu_mobile }}</view>
			<view class="ss-flex ss-w-100 ss-m-t-48 ss-gap-24">
				<z-button @tap="onCancel" class="ss-w-100" radius="64" height="76" plan>关闭</z-button>
				<z-button @tap="saveImage" class="ss-w-100" radius="64" height="76" borderColor="">保存图片</z-button>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>	
		import sheep from "@/sheep"
		const props = defineProps({
			modelValue:{
				type:Boolean,
				default:false
			},
			closeOnClickOverlay:{
				type:Boolean,
				default:true
			},
			mode:{
				type:String,
				default:'center' //center,left,right,top,bottom,middle,fullScreen,halfScreen
			},
			safeAreaInsetBottom:{
				type:Boolean,
				default:true
			},
			bgColor:{
				type:String,
				default:'#fff'
			},
			round:{
				type:Number,
				default:12
			},
			closeable:{
				type:Boolean,
				default:false
			},
			confirmClose:{
				type:Boolean,
				default:true
			},
		})
		const configInfo = computed(() => sheep.$store('app').configInfo)
		const emit = defineEmits(['update:modelValue','confirm'])
		const tiArr = [
			{
				type:1,
				name: '微信零钱',
			},
			{
				type:2,
				name: '银行卡转账',
			}
		]
		const state = reactive({
			show:false,
			tiType:1
		})
		const modal = ref()
		watch(() => props.modelValue,(value) => {
			emit('update:modelValue',value)
			if(value) modal.value.open()
			else modal.value.close()
		})
		const onCancel = () => {
			console.log(2);
			emit('update:modelValue',false)
		}
		function maskClick(){
			if(props.closeOnClickOverlay) onCancel()
		}
		const confirm = () => {		
			// emit('update:modelValue',false)
			if(props.confirmClose) onCancel()
			emit('confirm',state.tiType)
		}
		function saveImage(){
			// #ifdef H5
			sheep.$helper.toast('长按图片保存')
			return
			// #endif
			uni.saveImageToPhotosAlbum({
					filePath: configInfo.value.kefu_image,
					success: function () {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 2000
						})
					}
				})
		}
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 616rpx;
		background: linear-gradient( 180deg, #EBF6FF 0%, #FFFFFF 100%);
		border-radius: 24rpx;
		padding: 52rpx 48rpx 30rpx;
	}
</style>